<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="./js/jquery-1.8.2.min.js" ></script>

    <script src="https://unpkg.com/vue"></script>
    <script src="http://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <script>
            $(function(){
             $("#public").load("./public.html");
        });
    </script>
	<div id="public"></div>
	<div id="index_body">
		<div id="left">
			<h2>欢迎您来到1802PHP的新闻首页</h2>
		    	<ul>
		    		<li>生活不止眼前的苟且</li>
		    		<li>还有诗和远方的田野</li>
		    	</ul>
		    <div id="index" v-for="(val,key) in Index_Content.data.allNews">
		    	<dl>
		    		<dt v-if="val.img_url==null"><img src="./images/1.jpg" width="80px;" height="80px;"></dt>
		    		<dt v-else-if="val.img_url!=null"><img v-bind:src="['http://'+val.img_url]" width="80px;" height="80px;"></dt>
		    		<p><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_title}}</a></p>
		    		<p class="content"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></p>
		    	</dl>
		    </div>
		</div>
	    <div id="right">
	    	<div class="right_one">
		    	<span>今日话题</span>
		    	<div v-for="(val,key) in Index_Content.data.threeDays.today">
	    			<dl v-if="key==0">
			    		<dt><img v-bind:src="['http://'+val.img_url]" width="75px;" height="75px;"></dt>
			    		<dd>{{val.news_desc}}[<a v-bind:href="['./content.html?news_id='+val.news_id]">查看全文</a>]</dd>
		    		</dl>
		    		<ul>
		    			<li v-if="key==1"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==2"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==3"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    		</ul>
		    	</div>	
	    	</div>
	    	<div class="right_two">
	    		<span>昨日话题</span>
	    		<div v-for="(val,key) in Index_Content.data.threeDays.yesterday">
	    			<dl v-if="key==0">
			    		<dt><img v-bind:src="['http://'+val.img_url]" width="75px;" height="75px;"></dt>
			    		<dd>{{val.news_desc}}[<a v-bind:href="['./content.html?news_id='+val.news_id]">查看全文</a>]</dd>
		    		</dl>
		    		<ul>
		    			<li v-if="key==1"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==2"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==3"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    		</ul>
		    	</div>
	    	</div>
	    	<div class="right_three">
	    		<span>前日话题</span>
	    		<div v-for="(val,key) in Index_Content.data.threeDays.lastday">
	    			<dl v-if="key==0">
			    		<dt><img v-bind:src="['http://'+val.img_url]" width="75px;" height="75px;"></dt>
			    		<dd>{{val.news_desc}}[<a v-bind:href="['./content.html?news_id='+val.news_id]">查看全文</a>]</dd>
		    		</dl>
		    		<ul>
		    			<li v-if="key==1"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==2"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    			<li v-if="key==3"><a v-bind:href="['./content.html?news_id='+val.news_id]">{{val.news_desc}}</a></li>
		    		</ul>
		    	</div>	
	    	</div>
	    </div>
    </div>
<script>
    new Vue({
        el:'#index_body',
        data: {
            Index_Content:[],
            Index_content_url: 'http://10.101.147.56/try/news_news/tp5.0/public/allNews'  //存数据接口
        },
        created: function(){
            this.getImg() ;      //定义方法
        },
        methods: {
            getImg: function(){
                var that = this;
                that.$http({      //调用接口
                    method:'GET',
                    url:this.Index_content_url //this指data
                }).then(function(response){ //接口返回数据
                    //console.log(response.data);
                    this.Index_Content=response.data;
                },function(error){
                    console.log(error);
                })
            }
        }
    })
</script>
</body>
</html>